<template>
  <!--仓库调拨-->
  <div>
    <div class="titleColor">
      <span>调拨基本信息</span>
      <el-progress :percentage="7" :show-text="false"></el-progress>
      <!-- 调拨基本信息 -->
      <div class="weightFont">
        <el-row :gutter="24" style="padding-bottom: 10px">
          <el-col :span="7">调拨类型</el-col>
          <el-col :span="7">调拨申请日期</el-col>
          <el-col :span="7">期望到货日期</el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="7"><!--调拨类型-->
            <el-select v-model="transferType" placeholder="请选择" size="small">
              <el-option
                  v-for="item in transferTypes"
                  :key="'transferType'+item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictLabel">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7"><!--开始时间-->
            <el-date-picker
                v-model="date1"
                type="date"
                size="small"
                style="width: 80%"
                placeholder="选择日期">
            </el-date-picker>
          </el-col>
          <el-col :span="7"><!--结束时间-->
            <el-date-picker
                v-model="date2"
                type="date"
                size="small"
                style="width: 80%"
                placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-top: 20px;margin-bottom: 5px">
          <el-col :span="7">申请人</el-col>
          <el-col :span="7">申请人归属部门</el-col>
          <el-col :span="7">调拨单编号</el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="7">
            <el-button size="small" class="btnBorder" @click="handleChooseEmployee">十&nbsp;&nbsp;选择成员
            </el-button>
          </el-col>
          <el-col :span="7">
            <el-button size="small" class="btnBorder" @click="handleChooseDepartment">十&nbsp;&nbsp;选择部门</el-button>
          </el-col>
          <el-col :span="7">
            <el-input v-model="input" size="small" disabled placeholder="自动生成无需填写"></el-input>
          </el-col>
        </el-row>
      </div>
      <!--选择成员-->
      <choose-employee-view :open="chooseEmployeeDialog" @close="handleCloseEmployee"></choose-employee-view>
      <!--选择部门-->
      <choose-department-view :open="chooseDepartmentDialog" @close="handleCloseDepartment"></choose-department-view>
    </div>
    <!------------------------------------------------------------------------------>
    <div class="titleColor">
      <span>调出仓信息</span>
      <el-progress :percentage="6" :show-text="false"></el-progress>
      <div class="weightFont">
        <el-row :gutter="24" style="margin-top: 20px;margin-bottom: 5px">

          <el-col :span="7">调出仓库</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-select v-model="enterWarehouse" placeholder="请选择" size="small">
              <el-option
                  v-for="item in warehouses"
                  :key="'enterWarehouse'+item.id"
                  :label="item.label"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
    </div>
    <!------------------------------------------------------------------------------>
    <div class="titleColor">
      <span>调入仓信息</span>
      <el-progress :percentage="6" :show-text="false"></el-progress>
      <div class="weightFont">
        <el-row :gutter="24" style="margin-top: 20px;margin-bottom: 5px">
          <el-col :span="7">调入仓库</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-select v-model="outWarehouse" placeholder="请选择" size="small">
              <el-option
                  v-for="item in warehouses"
                  :key="'outWarehouse'+item.id"
                  :label="item.label"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
    </div>
    <!------------------------------------------------------------------------------>
    <div class="titleColor">
      <span>调拨产品信息</span>
      <el-progress :percentage="7" :show-text="false"></el-progress>
      <div class="weightFont">
        <el-row :gutter="24" style="margin-top: 20px;margin-bottom: 5px">
          <el-col :span="7">调拨产品明细</el-col>
        </el-row>
        <el-row :gutter="24">

          <el-table
              :data="tableData"
              stripe
              border
              height="300"
          >
            <el-table-column fixed type="index" width="80"></el-table-column>
            <el-table-column fixed label="选择产品" width="100">
              <template #default="scope">
                <el-button
                    size="mini"
                    icon="el-icon-coin"
                    @click="selectProduct(scope.row)"
                    style="width: 100%"
                >
                  {{ scope.row.productCode ? '修改' : '选择' }}
                </el-button>
              </template>
            </el-table-column>

            <el-table-column
                fixed
                prop="productName"
                label="产品名称"
                width="100">
            </el-table-column>
            <el-table-column
                prop="productCode"
                label="产品编号"
                width="110">
            </el-table-column>
            <el-table-column
                prop="productBrand"
                label="品牌"
                width="120">
            </el-table-column>
            <el-table-column
                prop="productModels"
                label="规格型号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="priductUnit"
                label="单位"
                width="80">
            </el-table-column>
            <el-table-column
                prop="outWarehouseNum"
                label="调出仓可用库存"
                width="120">
            </el-table-column>
            <el-table-column
                prop="enterWarehouseNum"
                label="调入仓可用库存"
                width="120">
            </el-table-column>
            <el-table-column
                prop="transferNum"
                label="本次调拨数量"
                width="130">
              <template #default="scope">
                <el-input size="small" v-model="scope.row.transferNum"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="purchasePrice"
                label="采购单价/元"
                width="120">
              <template #default="scope">
                <el-input size="small" v-model="scope.row.purchasePrice"></el-input>
              </template>
            </el-table-column>
            <el-table-column
                prop="totalPrice"
                label="产品采购金额合计/元"
                width="210">
              <template #default="scope">
                {{ scope.row.totalPrice }}
              </template>
            </el-table-column>
          </el-table>

          <el-row>
            <el-button type="text" size="small" @click="addRuleRow"
                       style="width: 100px; color: #42b983">十&nbsp;&nbsp;添加
            </el-button>
            <!--            <el-button type="text" size="small" @click="pasteRow"-->
            <!--                       style="width: 100px; color: #42b983">十&nbsp;&nbsp;粘贴新增-->
            <!--            </el-button>-->
          </el-row>
        </el-row>
        <el-row :gutter="24" style="margin-top: 10px;margin-bottom: 5px">
          <el-col :span="7">调拨产品总数</el-col>
          <el-col :span="7">调拨产品采购总额/元</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-input size="small" disabled placeholder="暂无内容"></el-input>
          </el-col>
          <el-col :span="7">
            <el-input size="small" disabled placeholder="暂无内容"></el-input>
          </el-col>
        </el-row>
      </div>
      <choose-product-view
          :open="chooseProductDialog"
          @close="handleCloseProduct"
          @selectedProductCodes="handleChooseProduct"
      ></choose-product-view>
    </div>
  </div>

</template>
<script>
import ChooseEmployeeView from "@/views/manage/warehouse/components/ChooseEmployeeView.vue";
import ChooseDepartmentView from "@/views/manage/warehouse/components/ChooseDepartmentView.vue";
import ChooseProductView from "@/views/manage/warehouse/components/ChooseProductView.vue";

export default {
  components: {ChooseDepartmentView, ChooseEmployeeView, ChooseProductView},

  data() {
    return {
      transferType: "",//调拨类型
      transferTypes: [{
        "dictCode": "",
        "dictLabel": ""
      }],//调拨类型s
      warehouses: [],//仓库s
      "enterWarehouse": "",//调入仓库
      "outWarehouse": "",//调出仓库
      value: [],
      input: "",
      date1: "",//开始时间
      date2: "",//结束时间
      tableData: [{}],
      chooseEmployeeDialog: false,//选择成员
      chooseDepartmentDialog: false,//选择部门
      chooseProductDialog: false,//选择产品
      receivedProduct: null, // 存储接收选择的产品对象
      selectedProductCodes: [] // 用于记录已选中的产品编号
    }
  },
  watch: {
    chooseEmployeeDialog: function (newVal, oldVal) {
      this.chooseEmployeeDialog = newVal
    },
    tableData: function (newVal, oldVal) {
      console.log("监听：", newVal, oldVal)
      this.tableData = newVal
    }
  },
  methods: {
    /*选择成员*/
    handleChooseEmployee() {
      this.chooseEmployeeDialog = true
    },
    handleCloseEmployee() {
      this.chooseEmployeeDialog = false
    },
    /*选择部门*/
    handleChooseDepartment() {
      this.chooseDepartmentDialog = true
    },
    handleCloseDepartment() {
      this.chooseDepartmentDialog = false
    },
    handleCloseProduct() {
      this.chooseProductDialog = false
    },
    addRuleRow() {
      this.tableData.push({})
    },

    selectProduct() {
      this.chooseProductDialog = true; // 直接打开子组件
    },
    // handleChooseProduct(selectedProductCodes) {
    //   console.log("选择产品：", selectedProductCodes)
    //   this.tableData = selectedProductCodes;
    //   this.chooseProductDialog = false//关闭选择产品子组件
    // },
    // 处理子组件传递的数据更新
    handleChooseProduct(updatedData) {
      if (updatedData.length === 0) {
        // 如果没有选中任何数据，则清空当前行
        Object.keys(this.tableData).forEach(key => {
          this.tableData[key] = '';
        });
      } else {
        // 如果有选中数据，则更新当前行或添加新数据
        const existingIds = this.tableData.map(item => item.id);
        updatedData.forEach(item => {
          if (!existingIds.includes(item.id)) {
            this.tableData.push(item); // 添加新数据
          }
        });
      }

      // 移除被取消选择的数据
      this.tableData = this.tableData.filter(item => {
        return updatedData.some(selectedItem => selectedItem.id === item.id);
      });
      this.chooseProductDialog = false//关闭选择产品子组件

    },
  }
  ,
  created() {
    /*查询所有调拨类型*/
    this.$axios.get("/manage/warehouseAllocate/getTransferTypes").then(response => {
      this.transferTypes = response.data.data
    }),
        /*查询所有仓库*/
        this.$axios.get("/manage/warehouseAllocate/getWarehouses").then(response => {
          this.warehouses = response.data.data
        })
  }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}

.weightFont {
  margin-bottom: 10px;
}

.btnBorder {
  border: 1px #333333 dashed;
  width: 220px;
}

.titleColor span {
  color: #007bff;
  font-weight: bolder;
}

.titleColor .el-progress {
  margin-bottom: 20px;
}

.el-row {
  margin-top: 1px;

  &:last-child {
    margin-bottom: 10px;
  }
}

.el-row .el-col {
  font-size: 13px;
  font-weight: bolder;

}

.el-icon-s-goods {
  border: 1px solid #666;
  padding: 2px;
  border-radius: 20%;
}

.el-icon-s-goods:hover {
  cursor: pointer;
}

.el-input, .el-select, .el-button {
  width: 80%
}

.el-date-picker {
  width: 250px;
}
</style>